import React from 'react'
import {withRouter} from 'react-router-dom'
import { Layout, Menu, Breadcrumb,Dropdown,Avatar,message} from 'antd';
import './index.css';
import logo from './touxiang.png'
import { adminRoutes } from '../../routes'
import { logOut } from '../../utils/auth'
import { UserOutlined } from '@ant-design/icons';
const routes = adminRoutes.filter(route=>route.isShow)
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;


function Index(props) {
  const popMenu = (
    <Menu onClick={p=>{
      if(p.key == "logout"){
        logOut();
        props.history.push('/login')
      }else{
        message.info(p.key)
      }
    }}>
      <Menu.Item key="logout" >退出登录</Menu.Item>
    </Menu>
  );
    return (
        <Layout>
          <Header className="header" style={{backgroundColor:'#93B5CF'}}>
            <div className="logo">
                <img src={logo} alt="logo" style={{height:'55px',marginLeft:'25px',position:'absolute',top:'27px'}}/>
            </div>
            <div className="user" style={{height:'35px',width:'35px',position:'absolute',right:'30px',top:'15px',border:'1px solid #fff',borderRadius:'100%',textAlign:'center',lineHeight:'35px'}}>
              <Dropdown overlay={popMenu} trigger={['click']}>
                <UserOutlined  style={{fontSize:'18px',color:'#fff'}}/>
              </Dropdown>
            </div>
            
          </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              {routes.map(route=>{
                return(<Menu.Item key={route.path} onClick={p=>props.history.push(p.key)}>
                  {route.icon}
                  {route.title}
                </Menu.Item>)
              })}
            </Menu>
          </Sider>
          <Layout style={{ padding: '16px' }}>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
              }}
            >
              {props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    )
}

export default withRouter(Index);
